<template>
  <div class="dataScreen-container">
    <div class="dataScreen-content" ref="dataScreenRef">
      <div
        class="head flex justify-between items-start pt-[10px] box-border px-[45px]"
      >
        <div class="left flex justify-start">
          <div class="bg-select" @click="changerules('/')">挂图首页</div>
          <div class="bg ml-5">查询统计</div>
          <div class="bg ml-5" @click="changerules('/jstzk')">建设投资</div>
          <div class="bg ml-5" @click="changerules('/gongdiku')">供地库</div>
        </div>
        <div class="right flex justify-end">
          <div class="bg mr-5" @click="changerules('/lixiangku')">立项库</div>
          <div class="bg mr-5">投资进度</div>
          <div class="bg">开工竣工</div>
        </div>
      </div>
      <div class="timeandtq">
        <el-date-picker
          v-model="selectedYear"
          type="year"
          :clearable="false"
          :editable="false"
        />
      </div>
      <div class="body p-6 box-border pt-10">
        <!-- 左侧 -->
        <div class="left">
          <div class="left-top px-[26px] pt-[17px] anmin">
            <imgleft :message="'项目投资分析'" />
            <div class="top flex justify-center items-center gap-4 mt-6">
              <div class="line-clamp-1">计划投资总额(万元)</div>
              <div class="line-clamp-1">投资总额(万元)</div>
            </div>
            <div class="bottom flex justify-center items-center gap-4 mt-4">
              <div class="line-clamp-1 text-[#4DE4FF] text-[34px]">13455</div>
              <div class="line-clamp-1 text-[#369EFF] text-[34px]">2344</div>
            </div>
          </div>
          <div class="left-bottom mt-4 anmin">
            <imgleft :message="'行业分类'" class="px-[26px] pt-[17px]" />
            <boxTable class="mt-6" />
          </div>
        </div>
        <!-- 中间部分 -->
        <div class="center">
          <div class="center-head">
            <span class="centerleft">项目总数</span>
            <span class="centernum">01870</span>
            <span class="centerright">个</span>
          </div>
          <div class="center-box">
            <!-- 顶部5个进度 -->
            <div class="center-box-top">
              <div class="item" @click="changetcshow">
                <div class="item-left">
                  <el-progress
                    type="circle"
                    :percentage="80"
                    class="item-left"
                    :width="72"
                    :height="72"
                    color="#03C3C3"
                  >
                    <template #default="{ percentage }">
                      <span class="percentage-value">{{ percentage }}%</span>
                      <span class="percentage-label">占比</span>
                    </template>
                  </el-progress>
                </div>
                <div class="item-right">
                  <div class="text-[#4DE4FF]">123</div>
                  <div class="text-[#fff]">在谈(个)</div>
                </div>
              </div>
              <div class="item" @click="changetcshow">
                <div class="item-left">
                  <el-progress
                    type="circle"
                    :percentage="80"
                    class="item-left"
                    :width="72"
                    :height="72"
                    color="#03C3C3"
                  >
                    <template #default="{ percentage }">
                      <span class="percentage-value">{{ percentage }}%</span>
                      <span class="percentage-label">占比</span>
                    </template>
                  </el-progress>
                </div>
                <div class="item-right">
                  <div class="text-[#4DE4FF]">123</div>
                  <div class="text-[#fff]">重点在谈(个)</div>
                </div>
              </div>
              <div class="item" @click="changetcshow">
                <div class="item-left">
                  <el-progress
                    type="circle"
                    :percentage="80"
                    class="item-left"
                    :width="72"
                    :height="72"
                    color="#03C3C3"
                  >
                    <template #default="{ percentage }">
                      <span class="percentage-value">{{ percentage }}%</span>
                      <span class="percentage-label">占比</span>
                    </template>
                  </el-progress>
                </div>
                <div class="item-right">
                  <div class="text-[#4DE4FF]">123</div>
                  <div class="text-[#fff]">签约(个)</div>
                </div>
              </div>
              <div class="item" @click="changetcshow">
                <div class="item-left">
                  <el-progress
                    type="circle"
                    :percentage="80"
                    class="item-left"
                    :width="72"
                    :height="72"
                    color="#03C3C3"
                  >
                    <template #default="{ percentage }">
                      <span class="percentage-value">{{ percentage }}%</span>
                      <span class="percentage-label">占比</span>
                    </template>
                  </el-progress>
                </div>
                <div class="item-right">
                  <div class="text-[#4DE4FF]">123</div>
                  <div class="text-[#fff]">落地(个)</div>
                </div>
              </div>
              <div class="item" @click="changetcshow">
                <div class="item-left">
                  <el-progress
                    type="circle"
                    :percentage="80"
                    class="item-left"
                    :width="72"
                    :height="72"
                    color="#03C3C3"
                  >
                    <template #default="{ percentage }">
                      <span class="percentage-value">{{ percentage }}%</span>
                      <span class="percentage-label">占比</span>
                    </template>
                  </el-progress>
                </div>
                <div class="item-right">
                  <div class="text-[#4DE4FF]">123</div>
                  <div class="text-[#fff]">终止项目总数(个)</div>
                </div>
              </div>
            </div>
            <!-- 底部地图 -->
            <div class="center-box-center">
              <div id="map">
                <Map />
              </div>
              <div class="heng my-4">
                <img
                  src="@/assets/images/Group 401500.png"
                  alt=""
                  class="henging"
                />
              </div>
            </div>
            <div class="center-box-botton">
              <bottomtable class="mt-4" />
            </div>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="right">
          <div class="item one px-[26px] py-[17px]">
            <imgleft :message="'招商项目产业分析'" />
            <div class="content relative">
              <div id="left" v-if="showicon"></div>
              <div id="right">
                <div class="right1">第一产业<span>32</span></div>
                <div class="right2">第二产业<span>45</span></div>
                <div class="right3">第三产业<span>23</span></div>
              </div>
              <div class="title absolute top-[55%] left-[15.5%] leading-5">
                产业<br />分析
              </div>
            </div>
          </div>
          <div class="item two anmin">
            <imgleft
              class="px-[26px] py-[17px]"
              :message="'重点招商项目列表'"
            />
            <righttable />
          </div>
          <div class="item three anmin">
            <imgleft
              class="px-[26px] py-[17px]"
              :message="'招商项目年度分析'"
            />
            <div class="top">2024年项目总数<span>24</span></div>
            <div id="threeicon"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 弹窗 -->
  <div v-show="tcshow">
    <div id="tc" ref="indextc">
      <div>
        <div class="tc-head">
          <div class="tc-left">在谈项目分布情况统览图</div>
          <div class="tc-right" @click="hidetcshow">
            <img src="@/assets/images/Group 401505@2x.png" />
          </div>
        </div>
        <div id="tc-icon">
          <div id="tc-icon-item"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import * as echarts from "echarts";
import imgleft from "@/components/vue/imgleft.vue";
import boxTable from "@/components/index/index-left-table.vue";
import righttable from "@/components/index/index-right-table.vue";
import bottomtable from "@/components/index/index-center-table.vue";
import { ref, onMounted, onBeforeUnmount, reactive } from "vue";
import Map from "@/components/index/map.vue";
import { ElProgress, ElDatePicker } from "element-plus";
const router = useRouter();
const showicon = ref(false);
const datalist = ref();
const changerules = (url) => {
  router.push(url);
};
const bottomdata = ref();
const dataScreenRef = ref<HTMLElement | null>(null);
const indextc = ref<HTMLElement | null>(null);
let selectedYear = ref(new Date().getFullYear().toString());
const handleYearChange = (year: number) => {
  selectedYear.value = year.toString();
};
onMounted(() => {
  if (dataScreenRef.value) {
    setTimeout(() => {
      dataScreenRef.value.style.transition = `all 0.5s ease`;
    }, 100);
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.value.style.width = `1920px`;
    dataScreenRef.value.style.height = `1080px`;
  }
  window.addEventListener("resize", resize);
});
var tcshow = ref(false);
//显示弹窗
const changetcshow = () => {
  tcshow.value = true;
  if (indextc.value) {
    indextc.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
  setTimeout(() => {
    tciconfunction();
  }, 100);
};
//隐藏弹窗
const hidetcshow = () => {
  tcshow.value = false;
};

const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
  if (tcshow.value) {
    if (indextc.value) {
      indextc.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    }
  }
};
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};
onMounted(() => {
  showicon.value = true;
  setTimeout(() => {
    echarts1();
    echarts2();
  }, 50);
});
//右下角图标
const echarts2 = () => {
  var chartDom = document.getElementById("threeicon");
  var myChart1 = echarts.init(chartDom);
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params) {
        var html = params[0].name + "<br/>";
        for (var i = 0; i < params.length; i++) {
          html += params[i].marker + params[i].value + "个" + "<br/>";
        }
        return html;
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["2019", "2020", "2021", "2022", "2023", "2024"],
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
      axisLine: {
        lineStyle: {
          color: "#FFF",
          width: 1,
        },
      },
    },
    yAxis: {
      type: "value",
      name: "单位(个)",
      nameLocation: "end",
      splitNumber: 3,
      axisLine: {
        lineStyle: {
          color: "#FFF",
          width: 1, //这里是为了突出显示加上的
        },
      },
      axisLabel: {
        textStyle: {
          color: "#FFF",
        },
      },
    },
    grid: {
      x: 40,
      y: 50,
      x2: 20,
      y2: 40,
    },
    series: [
      {
        data: [120, 132, 101, 134, 90, 230],
        type: "line",
        smooth: true,
        lineStyle: {
          normal: {
            width: 1, //波形图波浪的边框
            borderWidth: 4,
            color: "rgba(0, 246, 255, 1)",
          },
        },
        itemStyle: {
          normal: {
            color: "rgba(0, 246, 255, 1)",
          },
        },
        areaStyle: {
          normal: {
            //渐变色
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  //波形图渐变色样式
                  offset: 0,
                  color: "rgba(0, 246, 255, 0.82)",
                },
                {
                  offset: 0.8,
                  color: "rgba(0, 246, 255, 0)",
                },
              ],
              false
            ),
          },
        },
      },
    ],
  };

  option && myChart1.setOption(option);
};
//右上角图表
const echarts1 = () => {
  const dom = document.getElementById("left");
  const myChart2 = echarts.init(dom); // 初始化echarts实例
  const option = {
    tooltip: {
      trigger: "item",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 23, itemStyle: { color: "#F9DA4F" } },
          { value: 32, itemStyle: { color: "#03B9FE" } },
          { value: 45, itemStyle: { color: "#00D1C8" } },
        ],
      },
    ],
  };
  // 设置实例参数
  myChart2.setOption(option);
};

//弹窗图标
const tciconfunction = () => {
  var chartDom = document.getElementById("tc-icon-item");
  var myChart3 = echarts.init(chartDom);
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
      formatter: function (params) {
        // console.log(params);
        var html = params[0].name + "<br/>";
        for (var i = 0; i < params.length; i++) {
          html += params[i].marker + params[i].value + "个" + "<br/>";
        }
        return html;
      },
    },
    xAxis: {
      type: "category",
      data: [
        "制锦式街道",
        "纬北路街道",
        "官扎营街道",
        "堤口路街道",
        "南村街道",
        "药山街道",
        "泺口街道",
        "北坦街道",
        "天桥东街街道",
        "宝华街道",
        "无影山街道",
        "北村街道",
        "北园街道",
        "桑梓店街道",
        "大桥街道",
      ],
      axisLabel: {
        rotate: -45, // 设置标签倾斜角度，单位为度
        textStyle: {
          color: "#fff", //坐标的字体颜色
        },
      },
    },
    yAxis: {
      type: "value",
      name: "单位:(个)",
      textStyle: {
        color: "#fff", //坐标的字体颜色
      },
      axisLine: {
        lineStyle: {
          //改变xy轴线条的颜色
          color: "#FFF",
          width: 1, //这里是为了突出显示加上的
        },
      },
      axisLabel: {
        textStyle: {
          //改变xy轴上文字的颜色
          color: "#FFF",
        },
      },
    },
    series: [
      {
        data: [
          120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 123,
        ],
        type: "bar",
        showBackground: false,
        barWidth: "16px", //柱体宽度
        itemStyle: {
          barBorderRadius: [2, 2, 0, 0], //柱体圆角
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#0EECE4",
            },
            {
              offset: 1,
              color: "#058FE7",
            },
          ]),
        },
      },
    ],
  };

  option && myChart3.setOption(option);
};
</script>

<style lang="scss" scoped>
.dataScreen-container {
  width: 100%;
  // height: 100%;

  .dataScreen-content {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: left top;
    .head {
      background-image: url("@/assets/images/headimg.png");
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: 100% 100%;
      min-height: 75px;
      width: 100%;
      .bg-select {
        color: #00ffff;
        width: 132px;
        height: 48px;
        background-image: url("@/assets/images/indexheadselect.png");
        background-position: 50% 50%;
        background-size: 100% 100%;
        line-height: 48px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
        transform: translateY(-10px);
      }
      .bg {
        color: #00ffff;
        width: 132px;
        height: 48px;
        background-image: url("@/assets/images/indexunselect.png");
        background-position: 50% 50%;
        background-size: 100% 100%;
        line-height: 48px;
        text-align: center;
        font-size: 14px;
        transform: translateY(-10px);
        cursor: pointer;
      }
    }
  }
}
.body {
  display: flex;
  justify-content: space-between;
  .left {
    width: 22%;
    // border: 1px solid red;
    .left-top {
      background-image: url("@/assets/images/indexbg1.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 247px;
      .top {
        div {
          background-image: url("@/assets/images/indeximg3.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          width: 100%;
          height: 54.29px;
          text-align: center;
          line-height: 54.29px;
          color: #fff;
        }
      }
      .bottom {
        div {
          background-image: url("@/assets/images/indeximg6.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          width: 100%;
          height: 89.74px;
          text-align: center;
          line-height: 89.74px;
        }
      }
    }
    .left-bottom {
      background-image: url("@/assets/images/indexbg1.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 680px;
      width: 100%;
    }
  }
  .right {
    // border: 1px solid red;
    width: 22%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    .item {
      // border: 1px solid #fff;
      height: calc(100% / 3);
      box-sizing: border-box;
    }
    .one {
      background-image: url("@/assets/images/Group 401520@2x.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .content {
        display: flex;
        justify-content: space-between;
      }
      #left {
        background-image: url("@/assets/images/Group 401503@2x.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 40%;
        aspect-ratio: 1 / 1;
        margin-top: 60px;
      }
      #right {
        // border: 1px solid #fff;\
        width: 40%;
        height: 140px;
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: #fff;
        position: relative;
        span {
          color: #fff;
          font-size: 20px;
          font-weight: 600;
          text-align: center;
          color: #4de4ff;
          margin-left: 15px;
        }
        span::after {
          display: block;
          position: absolute;
          right: 20px;
          color: #4de4ff;
          font-size: 16px;
          font-weight: 600;
          transform: translateY(-25px);
          content: "%";
        }
        .right1::before {
          position: absolute;

          display: block;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #03b9fe;
          transform: translateY(10px) translateX(-20px);
          content: "";
        }
        .right2::before {
          position: absolute;
          display: block;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #00d1c8;
          transform: translateY(10px) translateX(-20px);
          content: "";
        }
        .right3::before {
          position: absolute;
          display: block;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #f9da4f;
          transform: translateY(10px) translateX(-20px);
          content: "";
        }
      }
    }
    .two {
      background-image: url("@/assets/images/indexbg1.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .three {
      background-image: url("@/assets/images/indexbg1.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .top {
        background-image: url("@/assets/images/Group 401501@2x.png");
        background-size: 100% 100%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        height: 64px;
        color: #fff;
        font-size: 22px;
        line-height: 64px;
        text-align: left;
        padding-left: 50px;
        span {
          font-size: 40px;
          color: #00fff4;
          margin-left: 20px;
        }
        span::after {
          right: 20px;
          color: rgba($color: #004ab9, $alpha: 1);
          font-size: 16px;
          font-weight: 600;
          content: "个";
        }
      }
      #threeicon {
        width: 410px;
        height: 195px;
      }
    }
  }
  .center {
    width: 55%;
    background-image: url("@/assets/images/indeximg2.png");
    background-position: 0% 100% !important;
    background-repeat: no-repeat;
    background-size: 100% 95%;
    position: relative;
    .center-head {
      background-image: url("@/assets/images/indeximg1.png");
      background-position: 50% 50% !important;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: absolute;
      height: 66.56px;
      width: 545.1px;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      color: #4de4ff;
      // font-size: 48px;
      // line-height: 66.56px;
      .centerleft {
        // line-height: 40.56px !important;
        font-size: 24px;
        margin-left: 37px;
        margin-right: 37px;
        // transform: translateY(-115px) !important;
        position: relative;
        top: -10px;
      }
      .centernum {
        font-size: 48px;
        font-weight: 600;
        letter-spacing: 29px;
        margin-left: 30px;
      }
      .centerright {
        margin-left: 4px;
        font-size: 48px;
        font-weight: 600;
      }
    }
    .center-box {
      // border: 1px solid red;
      height: 90%;
      margin-top: 9.5%;
      // background-color: red;
      .percentage-value {
        display: block;
        margin-top: 10px;
        font-size: 12.96px;
        color: #66ffff;
      }
      .percentage-label {
        display: block;
        margin-top: 10px;
        font-size: 7.68px;
        color: #fff;
      }
      .center-box-top {
        display: flex;
        justify-content: space-around;

        .item {
          // border: 1px solid red;
          display: flex;
          justify-content: center;
          cursor: pointer;

          .item-left {
            width: 72px;
            height: 72px;
            background-image: url("@/assets/images/jdbg.png");
            background-position: 50% 50% !important;
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
          .item-right {
            display: flex;
            flex-direction: column;
            align-content: center;
            justify-content: center;
            margin-left: 10px;
          }
        }
      }
      .center-box-center {
        // margin-top: 20px;
        padding: 20px;
        width: 100%;
        height: 404px;

        #map {
          width: 100%;
          // height: 200px;
        }
        .heng {
          .henging {
            width: 100%;
            height: 100%;
          }
        }
      }
      .center-box-botton {
        // border: 1px solid red;
        height: 372px;
        overflow: hidden;
      }
    }
  }
}
#tc {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: left top;
  width: 800px;
  height: 600px;
  z-index: 999;
  background-image: url("");
  background-position: 50% 50%;
  background-size: 100% 100%;
  .tc-head {
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: space-between;
    // border: 1px solid red;
    padding-bottom: 10px;
    .tc-left {
      font-size: 32px;
      color: #fff;
      padding: 6% 0 0 7%;
    }
    .tc-right {
      img {
        width: 26px;
        height: 26px;
        margin-top: 70px;
        margin-right: 50px;
      }
    }
  }
  #tc-icon {
    width: 100%;
    height: 390px;
    padding: 0 50px;

    #tc-icon-item {
      width: 100%;
      height: 100%;
      // border: 1px solid red;
    }
  }
}
.timeandtq {
  position: absolute;
  top: 75px;
}
:deep(.el-input__wrapper) {
  background-color: #04072f;
  border: 1px solid #04072f !important;
  box-shadow: none !important;
  .el-input__prefix {
    color: #fff;
  }
  .el-input__inner {
    color: #fff;
  }
}
</style>
